<template>
    <div class="user">
        <el-form :inline="true" :model="searchParam" class="demo-form-inline">
            <el-form-item>
                <el-input
                    clearable
                    v-model="searchParam.name"
                    placeholder="名称"
                />
            </el-form-item>
            <el-form-item>
                <el-select clearable v-model="searchParam.plateUuid" placeholder="请选择板块">
                    <el-option v-for="plate in data.plates" :key="plate.uuid" :label="plate.name" :value="plate.uuid"/>
                </el-select>
            </el-form-item>
            <el-form-item style="width: 300px">
                <el-button type="primary" @click="search">查询</el-button>
                <el-button type="primary" @click="addView(null)">添加分类</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="data.categories" border style="width: 100%" v-loading="data.loading"
                  element-loading-text="拼命加载中">
            <el-table-column prop="name" label="名称" align="center" width="150px"/>
            <el-table-column prop="plateName" label="所属板块" align="center" width="150px"/>
            <el-table-column
                prop="createTime"
                label="创建时间"
                width="180"
                align="center"
            >
            </el-table-column>
            <el-table-column
                prop="updateTime"
                label="更新时间"
                width="180"
                align="center"
            >
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="230" align="center">
                <template #default="scope">
                    <el-button
                        class="button-space"
                        @click="addView(scope.row)"
                        type="success"
                        size="small"
                    >编辑
                    </el-button>
                    <el-popconfirm
                        title="你确定要删除该板块吗？"
                        confirm-button-text="是"
                        cancel-button-text="否"
                        @confirm="deleteCategory(scope.row.uuid)"
                    >
                        <template #reference>
                            <el-button
                                class="button-space"
                                type="danger"
                                size="small"
                            >删除
                            </el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            background
            layout="prev, pager, next"
            :total="data.total"
            style="text-align: center; margin-top: 10px"
            @current-change="currentChange"
        >
        </el-pagination>
        <!-- 添加或修改分类-->
        <el-dialog :title="data.title" v-model="data.categoryAddOrUpdateDisable">
            <el-form :model="categoryAddOrUpdateData" :rules="rules" ref="addFormRef">
                <el-form-item label="名称" label-width="130px" prop="name">
                    <el-input v-model="categoryAddOrUpdateData.name" autocomplete="off"/>
                </el-form-item>
                <el-form-item label="板块" label-width="130px" prop="plateUuid">
                    <el-select clearable v-model="categoryAddOrUpdateData.plateUuid" placeholder="请选择板块">
                        <el-option v-for="plate in data.plates" :key="plate.uuid" :label="plate.name"
                                   :value="plate.uuid"/>
                    </el-select>
                </el-form-item>
                <el-form-item label-width="130px">
                    <el-button @click="data.categoryAddOrUpdateDisable = false">取 消</el-button>
                    <el-button type="primary" @click="addOrUpdateCategory">确认</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
import {onMounted, reactive, ref} from "vue";
import {page, deleted, add, update} from "@/api/category/category";
import {all} from '@/api/plate/plate'
import {ElMessage} from "element-plus";

export default {
    setup() {
        const searchParam = reactive({
            name: '',
            plateUuid: '',
            page: 1,
            size: 10
        })
        const data = reactive({
            categories: [],
            total: 0,
            loading: false,
            categoryAddOrUpdateDisable: false,
            title: '添加',
            plates: []
        })
        const categoryAddOrUpdateData = reactive({
            name: '',
            plateUuid: '',
            uuid: ''
        })
        const rules = reactive({
            name: [
                {
                    required: true,
                    message: "请输入分类名称",
                    trigger: "blur",
                },
            ],
            plateUuid: [
                {
                    required: true,
                    message: "请选择板块",
                    trigger: "blur",
                },
            ]
        })
        /**
         * 分页查询分类
         * @returns {Promise<void>}
         */
        const pageSearchCategory = async () => {
            data.loading = true
            page(searchParam).then(res => {
                data.categories = res.data.records
                data.total = res.data.total
            }).finally(() => {
                data.loading = false
            })
        }

        /**
         * 删除分类
         * @param uuid
         * @returns {Promise<void>}
         */
        const deleteCategory = async (uuid) => {
            deleted(uuid).then(() => {
                ElMessage({
                    message: '删除成功',
                    type: 'success',
                })
                pageSearchCategory()
            })
        }
        /**
         * 搜索查询板块
         * @returns {Promise<void>}
         */
        const search = async () => {
            page(searchParam).then(res => {
                data.categories = res.data.records
                data.total = res.data.total
            })
        }
        /**
         * 添加页面展示
         * @returns {Promise<void>}
         */
        const addView = async (row) => {
            data.categoryAddOrUpdateDisable = true
            if (row != null) {
                data.title = '编辑'
                categoryAddOrUpdateData.name = row.name
                categoryAddOrUpdateData.uuid = row.uuid
                categoryAddOrUpdateData.plateUuid = row.plateUuid
            } else {
                data.title = '添加'
                categoryAddOrUpdateData.name = ''
                categoryAddOrUpdateData.uuid = ''
                categoryAddOrUpdateData.plateUuid = ''
            }
        }
        const addFormRef = ref(null)
        /**
         * 添加分类
         * @returns {Promise<void>}
         */
        const addOrUpdateCategory = async () => {
            addFormRef.value.validate((valid) => {
                if (!valid) {
                    return false
                }
                if (categoryAddOrUpdateData.uuid) {
                    update(categoryAddOrUpdateData).then(() => {
                        ElMessage({
                            message: '修改成功',
                            type: 'success',
                        })
                        data.categoryAddOrUpdateDisable = false
                        pageSearchCategory()
                    })
                } else {
                    add(categoryAddOrUpdateData).then(() => {
                        ElMessage({
                            message: '添加成功',
                            type: 'success',
                        })
                        data.categoryAddOrUpdateDisable = false
                        pageSearchCategory()
                    })
                }
            })
        }
        /**
         * 获取所有板块
         * @returns {Promise<void>}
         */
        const allPlate = async () => {
            all().then(res => {
                data.plates = res.data
            })
        }
        /**
         * 分页
         * @param value
         */
        const currentChange = (value) => {
            searchParam.page = value
            pageSearchCategory()
        }
        onMounted(() => {
            pageSearchCategory()
            allPlate()
        })
        return {
            data,
            searchParam,
            categoryAddOrUpdateData,
            rules,
            addFormRef,
            search,
            deleteCategory,
            addView,
            addOrUpdateCategory,
            currentChange
        }
    }
}
</script>

<style scoped>

</style>